<template>
    <!-- 设置 -->
    <div style="margin-top:50px;">
        <el-form ref="form" :model="personalData" :inline="true"  size="mini">
            <!-- <div>
                <el-form-item label="我的角色">
                    <span style="display:inline-block;width:180px;">{{personalData.role}}</span>
                </el-form-item>
            </div>-->
            <div>
                <el-form-item label="用户名">
                    <span style="display:inline-block;width:180px;">{{personalData.userName}}</span>
                    <span style="font-size:14px;color:#888;">不可修改。一般用于后台登入名</span>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="手机号">
                    <el-input maxlength="11" placeholder="请输入手机号" v-model="personalData.phone"></el-input>
                </el-form-item>
            </div>
            <el-form-item size="small" style="margin-left:100px;margin-top:20px;">
                <el-button type="primary" @click="confirm">确认修改</el-button>
                <!-- <el-button type="primary" @click="reset">重置</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
// import "../../../static/css/officeBlock.scss";
import utils from "../../util/request.js";

export default {
    data() {
        return {
            personalData: {
                //表单
                role: "", //我的角色
                userName: "", //用户名
                realName: "", //姓名
                phone: "", //手机号
                nickName: "", //昵称
                sex: 1 //性别
            }
        };
    },
    methods: {
        confirm() {
            // 确认修改
            if (this.personalData.phone != "") {
                utils
                    .request("user/user", "put", {
                        userId: sessionStorage.che_userId,
                        mobilePhone: this.personalData.phone,
                    })
                    .then(res => {
                        console.log(res);
                        if (res.data.code == 20000) {
                            this.$message({
                                type: "success",
                                message: "修改成功！"
                            });
                        }
                        if (res.data.code == 20004) {
                            this.$message({
                                type: "error",
                                message: "请重新登录！"
                            });
                            this.$router.push("/");
                        }
                    });
            } else {
                this.$message({
                    type: "error",
                    message: "修改时不能为空！"
                });
            }
        },
        reset() {
            // 重置
            this.personalData.phone = "";
        }
    },
    created() {
        utils
            .request("user/users", "post", {
                userId: sessionStorage.che_userId
            })
            .then(res => {
                console.log(res);
                if (res.data.code == 20000) {
                    let dataList = res.data.dataList;
                    dataList.forEach(item => {
                        this.personalData.userName = item.username;
                        this.personalData.phone = item.mobilePhone;
                    });
                }
                if (res.data.code == 20004) {
                    this.$router.push("/");
                }
            });
    }
};
</script>

